﻿
<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Cadastro Padrão</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.custom.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>    
    <!--script type="text/javascript" src="jqwidgets/jqxgrid.selection.js"></script-->     
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script> 
     
    <script type="text/javascript" src="../../jqwidgets/jqxsplitter.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxinput.js"></script>    
    
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.filter.js"></script>
   <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../../jqwidgets/globalization/globalize.js"></script>
    <script type="text/javascript" src="../../jqwidgets/globalization/globalize.culture.pt.js"></script>
    <script type="text/javascript" src="../../jqwidgets/globalization/globalize.culture.pt-BR.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var data = '[{ "nm_empresa": "Alfreds Futterkiste", "nm_contato": "Maria Anders", "ds_contato": "Sales Representative", "endereco": "Obere Str. 57", "cidade": "Berlin", "pais": "Germany" }, { "nm_empresa": "Ana Trujillo Emparedados y helados", "nm_contato": "Ana Trujillo", "ds_contato": "Owner", "endereco": "Avda. de la Constitucin 2222", "cidade": "Mxico D.F.", "pais": "Mexico" }, { "nm_empresa": "Antonio Moreno Taquera", "nm_contato": "Antonio Moreno", "ds_contato": "Owner", "endereco": "Mataderos 2312", "cidade": "Mxico D.F.", "pais": "Mexico" }, { "nm_empresa": "Around the Horn", "nm_contato": "Thomas Hardy", "ds_contato": "Sales Representative", "endereco": "120 Hanover Sq.", "cidade": "London", "pais": "UK" }, { "nm_empresa": "Berglunds snabbkp", "nm_contato": "Christina Berglund", "ds_contato": "Order Administrator", "endereco": "Berguvsvgen 8", "cidade": "Lule", "pais": "Sweden" }, { "nm_empresa": "Blauer See Delikatessen", "nm_contato": "Hanna Moos", "ds_contato": "Sales Representative", "endereco": "Forsterstr. 57", "cidade": "Mannheim", "pais": "Germany" }, { "nm_empresa": "Blondesddsl pre et fils", "nm_contato": "Frdrique Citeaux", "ds_contato": "Marketing Manager", "endereco": "24, place Klber", "cidade": "Strasbourg", "pais": "France" }, { "nm_empresa": "Blido Comidas preparadas", "nm_contato": "Martn Sommer", "ds_contato": "Owner", "endereco": "C\/ Araquil, 67", "cidade": "Madrid", "pais": "Spain" }, { "nm_empresa": "Bon app\'", "nm_contato": "Laurence Lebihan", "ds_contato": "Owner", "endereco": "12, rue des Bouchers", "cidade": "Marseille", "pais": "France" }, { "nm_empresa": "Bottom-Dollar Markets", "nm_contato": "Elizabeth Lincoln", "ds_contato": "Accounting Manager", "endereco": "23 Tsawassen Blvd.", "cidade": "Tsawassen", "pais": "Canada" }, { "nm_empresa": "B\'s Beverages", "nm_contato": "Victoria Ashworth", "ds_contato": "Sales Representative", "endereco": "Fauntleroy Circus", "cidade": "London", "pais": "UK" }, { "nm_empresa": "Cactus Comidas para llevar", "nm_contato": "Patricio Simpson", "ds_contato": "Sales Agent", "endereco": "Cerrito 333", "cidade": "Buenos Aires", "pais": "Argentina" }, { "nm_empresa": "Centro comercial Moctezuma", "nm_contato": "Francisco Chang", "ds_contato": "Marketing Manager", "endereco": "Sierras de Granada 9993", "cidade": "Mxico D.F.", "pais": "Mexico" }, { "nm_empresa": "Chop-suey Chinese", "nm_contato": "Yang Wang", "ds_contato": "Owner", "endereco": "Hauptstr. 29", "cidade": "Bern", "pais": "Switzerland" }, { "nm_empresa": "Comrcio Mineiro", "nm_contato": "Pedro Afonso", "ds_contato": "Sales Associate", "endereco": "Av. dos Lusadas, 23", "cidade": "Sao Paulo", "pais": "Brazil" }, { "nm_empresa": "Consolidated Holdings", "nm_contato": "Elizabeth Brown", "ds_contato": "Sales Representative", "endereco": "Berkeley Gardens 12 Brewery", "cidade": "London", "pais": "UK" }, { "nm_empresa": "Drachenblut Delikatessen", "nm_contato": "Sven Ottlieb", "ds_contato": "Order Administrator", "endereco": "Walserweg 21", "cidade": "Aachen", "pais": "Germany" }, { "nm_empresa": "Du monde entier", "nm_contato": "Janine Labrune", "ds_contato": "Owner", "endereco": "67, rue des Cinquante Otages", "cidade": "Nantes", "pais": "France" }, { "nm_empresa": "Eastern Connection", "nm_contato": "Ann Devon", "ds_contato": "Sales Agent", "endereco": "35 King George", "cidade": "London", "pais": "UK" }, { "nm_empresa": "Ernst Handel", "nm_contato": "Roland Mendel", "ds_contato": "Sales Manager", "endereco": "Kirchgasse 6", "cidade": "Graz", "pais": "Austria"}]';

			var dataObj = eval(data);
            var customsortfunc = function (column, direction) {
                var sortdata = new Array();
                if (direction == 'ascending') direction = true;
                if (direction == 'descending') direction = false;
                if (direction != null) {
                    for (i = 0; i < dataObj.length; i++) {
                        sortdata.push(dataObj[i]);
                    }
                }
                else sortdata = data;
                var tmpToString = Object.prototype.toString;
                Object.prototype.toString = (typeof column == "function") ? column : function () { return this[column] };
                if (direction != null) {
                    sortdata.sort(compare);
                    if (!direction) {
                        sortdata.reverse();
                    }
                }
                source.localdata = sortdata;
                $("#jqxgrid").jqxGrid('updatebounddata', 'sort');
                Object.prototype.toString = tmpToString;
            }
            // custom comparer.
            var compare = function (value1, value2) {
                value1 = String(value1).toLowerCase();
                value2 = String(value2).toLowerCase();
                try {
                    var tmpvalue1 = parseFloat(value1);
                    if (isNaN(tmpvalue1)) {
                        if (value1 < value2) { return -1; }
                        if (value1 > value2) { return 1; }
                    }
                    else {
                        var tmpvalue2 = parseFloat(value2);
                        if (tmpvalue1 < tmpvalue2) { return -1; }
                        if (tmpvalue1 > tmpvalue2) { return 1; }
                    }
                }
                catch (error) {
                    var er = error;
                }
                return 0;
            };
            
            // prepare the data
            var source =
            {
            	localdata: data,
                sort: customsortfunc,
                pagesize: 20,
                datatype: "json",
                datafields: [
                    { name: 'nm_empresa', type: 'string' },
                    { name: 'nm_contato', type: 'string' },
                    { name: 'ds_contato', type: 'string' },
                    { name: 'endereco', type: 'string' },
                    { name: 'cidade', type: 'string' },
                    { name: 'pais', type: 'string' }
                ],
                async: false,                                
                sortcolumn: 'nm_empresa',
                sortdirection: 'asc',                
                updaterow: function (rowid, rowdata, commit) {
                    commit(true);
                }
            };
            //var dataAdapter = new $.jqx.dataAdapter(source); sem filtro
			var dataAdapter = new $.jqx.dataAdapter(source,
                {
                    formatData: function (data) {
                        data.name_startsWith = $("#searchField").val();
                        return data;
                    }
                }
            );
            
            $("#jqxgrid").jqxGrid(
            {
                width: '100%',
                height: '100%',                
                source: dataAdapter,
                sortable: true,
                pageable: true,                
                columnsresize: true,
                pagermode: 'simple',
                theme: "custom",                                                
                columns: [
                    { text: 'Nome Empresa', datafield: 'nm_empresa', width: 250 },
                    { text: 'Nome Contato', datafield: 'nm_contato', width: 150 },
                    { text: 'Título', datafield: 'ds_contato', width: 180 },
                    { text: 'Cidade', datafield: 'cidade', width: 120 },
                    { text: 'País', datafield: 'pais'}
                ],
                showtoolbar: true,                
                rendertoolbar: function (toolbar) {
                    var me = this;
                    var container = $("<div style='margin: 5px;'></div>");
                    var span = $("<span style='float: left; margin-top: 5px; margin-right: 4px;'>Procurar por Cidade: </span>");
                    var input = $("<input class='jqx-input jqx-widget-content jqx-rc-all' id='searchField' type='text' style='height: 23px; float: left; width: 223px;' />");
                    toolbar.append(container);
                    container.append(span);
                    container.append(input);
                    if (theme != "") {
                        input.addClass('jqx-widget-content-' + theme);
                        input.addClass('jqx-rc-all-' + theme);
                    }
                    var oldVal = "";
                    input.on('keydown', function (event) {
                    	alert(input.val());
                        if (input.val().length >= 2) {
                            if (me.timer) {
                                clearTimeout(me.timer);
                            }
                            if (oldVal != input.val()) {
                                me.timer = setTimeout(function () {
                                    $("#jqxgrid").jqxGrid('updatebounddata');
                                }, 1000);
                                oldVal = input.val();
                            }
                        }
                        else {
                            $("#jqxgrid").jqxGrid('updatebounddata');
                        }
                    });
                }
            });

            $("#nm_empresa").jqxInput({height: 23, theme: "custom" });
            $("#nm_contato").jqxInput({ height: 23, theme: "custom"});
            $("#ds_contato").jqxInput({ height: 23, theme: "custom"});
            $("#cidade").jqxInput({ height: 23, theme: "custom"});
            $("#pais").jqxInput({ height: 23, theme: "custom"});
            $("#splitter").jqxSplitter({ width: '100%', height: 400, theme: "custom", panels: [{ size: window.innerWidth - 400, theme: "custom",collapsible: false}, {min: 250, theme: "custom", collapsible : true}] });
            $('#jqxgrid').on('rowselect', function (event) {
                // event arguments.
                var args = event.args;
                // selected row.
                var row = event.args.row;
                // update inputs.
                $("#nm_empresa").val(row.nm_empresa);
                $("#nm_contato").val(row.nm_contato);
                $("#ds_contato").val(row.ds_contato);
                $("#cidade").val(row.cidade);
                $("#pais").val(row.pais);                
            });
            $('#jqxgrid').on('rowdoubleclick', function (event) {                
                $('#splitter').jqxSplitter('expand');
            });
            $("#Save").jqxButton({  width: 70, height: 23, theme: "custom" });
            $("#Save").click(function () {
                var row = $('#jqxgrid').jqxGrid('getselectedrowindex');
                var rowid = $("#jqxgrid").jqxGrid('getrowid', row);
                var data = { nm_empresa: $("#nm_empresa").val(), nm_contato: $("#nm_contato").val(), ds_contato: $("#ds_contato").val(), cidade: $("#cidade").val(), pais: $("#pais").val() };
                $("#jqxgrid").jqxGrid('updaterow', rowid, data);
            });
            $('#splitter').jqxSplitter('collapse');
            
            var localizationobj = {};
            localizationobj.pagergotopagestring = "Página:";
            localizationobj.pagershowrowsstring = "Número de Linhas:";
            localizationobj.pagerrangestring = " de ";
            localizationobj.pagernextbuttonstring = "Próximo";
            localizationobj.pagerpreviousbuttonstring = "Anterior";
            localizationobj.sortascendingstring = "Ordenar Cresc.";
            localizationobj.sortdescendingstring = "Ordenar Descr.";
            localizationobj.sortremovestring = "Tirar Ordenação";
            localizationobj.firstDay = 1;
            localizationobj.percentsymbol = "%";
            localizationobj.currencysymbol = "$";
            localizationobj.currencysymbolposition = "Fazer";
            localizationobj.decimalseparator = ".";
            localizationobj.thousandsseparator = ",";
            var days = {
                // full day names
                names: ["domingo","segunda-feira", "terça-feira", "quarta-feira", "quinta-feira", "sexta-feira", "sábado"],
                // abbreviated day names
                namesAbbr: ["Dom", "Seg", "Ter", "Qua", "Qui", "Sex", "Sab"],
                // shortest day names
                namesShort: ["Do", "Se", "Te", "Qa", "Qi", "Sx", "Sa"]
            };
            localizationobj.days = days;
            var months = {
                // full month names (13 months for lunar calendards -- 13th month should be "" if not lunar)
                names: ["Janeiro", "Fevereiro", "Março", "Abril", "Maio", "Junho", "Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Desembro", ""],
                // abbreviated month names
                namesAbbr: ["Jan", "Fev", "Marc", "Abr", "Mai", "Jun", "Jul", "Ago", "Set", "Out", "Nov", "Dez", ""]
            };
            localizationobj.months = months;
            // apply localization.
            $("#jqxgrid").jqxGrid('localizestrings', localizationobj);          
        });
    </script>
</head>
<body class='default' id="pagina">
    <div id="splitter">
        <div>
            <div style="border: none;" id='jqxgrid'>
             
            </div>
        </div>
        <div id="ContentPanel">
            <form id="Form">
                <table style="margin-top: 20px; width: 100%;">
                     <tr><td style="text-align:right;">Nome Empresa:</td><td style="text-align:left;"><input type="text" id="nm_empresa" /></td></tr>
                     <tr><td style="text-align:right;">Nome Contato:</td><td style="text-align:left;"><input type="text" id="nm_contato" /></td></tr>
                     <tr><td style="text-align:right;">Título Contato:</td><td style="text-align:left;"><input type="text" id="ds_contato" /></td></tr>
                     <tr><td style="text-align:right;">Cidade:</td><td style="text-align:left;"><input type="text" id="cidade" /></td></tr>
                     <tr><td style="text-align:right;">País:</td><td style="text-align:left;"><input type="text" id="pais" /></td></tr>
                     <tr><td></td><td style="padding-left: 35px; text-align: left;"><input value="Save" type="button" id="Save" /></td></tr>
                </table>
            </form>
        </div>
    </div>
</body>
</html>
